<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工管理 - 添加员工</title>
    <link rel="stylesheet" href="../../css/style.css">
    <link rel="stylesheet" href="../../css/add.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script type="module" src="../../js/components/navigation.js"></script>
    <script type="module" src="../../js/utils.js"></script>
    <script type="module" src="../../js/api.js"></script>

</head>
<body>
    <div class="loading-overlay" id="loading-overlay">
        <div class="loading-spinner"></div>
    </div>

    <div class="toast" id="toast"></div>

    <div class="app-container">
        <header class="app-header">
            <div class="logo">
                <i class="fas fa-building"></i> 员工管理系统
            </div>
            <div class="user-info">
                <span id="username-display" class="username"></span>
                <button id="logout-btn" class="btn btn-secondary">
                    <i class="fas fa-sign-out-alt"></i> 退出登录
                </button>
            </div>
        </header>

        <div class="app-body">
            <aside class="sidebar">
                <nav class="menu">
                    <ul>
                        <li><a href="#" class="menu-item active" data-target="welcome">欢迎页</a></li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">员工管理</a>
                            <ul class="submenu">
                                <li><a href="../employee/list.html" class="submenu-item">员工列表</a></li>
                                <li><a href="../employee/add.html" class="submenu-item">添加员工</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">业务管理</a>
                            <ul class="submenu">
                                <li><a href="../business/list.html" class="submenu-item">业务列表</a></li>
                                <li><a href="../business/create.html" class="submenu-item">创建业务</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">薪酬管理</a>
                            <ul class="submenu">
                                <li><a href="../salary/overview.html" class="submenu-item">薪酬概览</a></li>
                                <li><a href="../salary/manage.html" class="submenu-item">薪酬管理</a></li>
                            </ul>
                        </li>
                        <li class="menu-group">
                            <a href="#" class="menu-item">系统设置</a>
                            <ul class="submenu">
                                <li><a href="../system/user.html" class="submenu-item">用户管理</a></li>
                                <li><a href="../system/profile.html" class="submenu-item">个人设置</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </aside>

            <main class="content">
                <div class="page-header">
                    <h1><i class="fas fa-user-plus"></i> 添加员工</h1>
                    <div class="breadcrumb">
                        <a href="#"><i class="fas fa-home"></i> 首页</a> &gt;
                        <a href="list.html"><i class="fas fa-users"></i> 员工管理</a> &gt;
                        <span><i class="fas fa-user-plus"></i> 添加员工</span>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h2>员工信息表单</h2>
                    </div>
                    <div class="card-body">
                        <form id="add-employee-form" class="form-horizontal">
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="name" class="form-label">姓名 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        </div>
                                        <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名">
                                    </div>
                                    <div class="form-error" id="name-error"></div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="age" class="form-label">年龄 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                                        </div>
                                        <input type="number" id="age" name="age" class="form-control" placeholder="请输入年龄">
                                    </div>
                                    <div class="form-error" id="age-error"></div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="position" class="form-label">职位 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-briefcase"></i></span>
                                        </div>
                                        <input type="text" id="position" name="position" class="form-control" placeholder="请输入职位">
                                    </div>
                                    <div class="form-error" id="position-error"></div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="department" class="form-label">部门 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-sitemap"></i></span>
                                        </div>
                                        <select id="department" name="department" class="form-control">
                                            <option value="">请选择部门</option>
                                            <option value="技术部">技术部</option>
                                            <option value="市场部">市场部</option>
                                            <option value="人事部">人事部</option>
                                            <option value="销售部">销售部</option>
                                            <option value="财务部">财务部</option>
                                        </select>
                                    </div>
                                    <div class="form-error" id="department-error"></div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="hireDate" class="form-label">入职日期 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                        </div>
                                        <input type="date" id="hireDate" name="hireDate" class="form-control">
                                    </div>
                                    <div class="form-error" id="hireDate-error"></div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="salary" class="form-label">薪资 <span class="required">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-money-bill-wave"></i></span>
                                        </div>
                                        <input type="number" id="salary" name="salary" class="form-control" placeholder="请输入薪资" step="0.01">
                                    </div>
                                    <div class="form-error" id="salary-error"></div>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="phone" class="form-label">手机号码</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        </div>
                                        <input type="text" id="phone" name="phone" class="form-control" placeholder="请输入手机号码">
                                    </div>
                                    <div class="form-error" id="phone-error"></div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="email" class="form-label">电子邮箱</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        </div>
                                        <input type="email" id="email" name="email" class="form-control" placeholder="请输入电子邮箱">
                                    </div>
                                    <div class="form-error" id="email-error"></div>
                                </div>
                            </div>

                            <div class="action-buttons">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save"></i> 提交
                                </button>
                                <a href="list.html" class="btn btn-secondary">
                                    <i class="fas fa-times"></i> 取消
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        import { api } from '../../js/api.js';
        <!-- 移除ES6模块导入，使用全局对象 -->
        import { initNavigation } from '../../js/components/navigation.js';

        document.addEventListener('DOMContentLoaded', function() {
            // 初始化导航
            initNavigation('main-menu', '员工管理', '添加员工');

            // 检查登录状态
            checkLoginStatus();

            // 显示用户名
            const username = localStorage.getItem('username');
            if (username) {
                document.getElementById('username-display').textContent = username;
            }

            // 退出登录
            document.getElementById('logout-btn').addEventListener('click', function() {
                localStorage.removeItem('token');
                localStorage.removeItem('username');
                window.location.href = '../../index.html';
            });

            // 表单提交事件
            document.getElementById('add-employee-form').addEventListener('submit', function(e) {
                e.preventDefault();

                // 表单验证
                if (!validateForm()) {
                    return;
                }

                // 显示加载状态
                showLoading(true);

                // 获取表单数据
                const formData = {
                    name: document.getElementById('name').value.trim(),
                    age: parseInt(document.getElementById('age').value.trim()),
                    position: document.getElementById('position').value.trim(),
                    department: document.getElementById('department').value.trim(),
                    hireDate: document.getElementById('hireDate').value.trim(),
                    salary: parseFloat(document.getElementById('salary').value.trim()),
                    phone: document.getElementById('phone').value.trim(),
                    email: document.getElementById('email').value.trim()
                };

                // 提交表单数据
                api.employee.add(formData)
                    .then(response => {
                        showLoading(false);
                        if (response) {
                            showToast('添加成功', 'success');
                            setTimeout(() => {
                                window.location.href = 'list.html';
                            }, 1500);
                        } else {
                            showToast('添加失败', 'error');
                        }
                    })
                    .catch(error => {
                        showLoading(false);
                        console.error('Failed to add employee:', error);
                        showToast('添加失败，请重试', 'error');
                    });
            });

            // 实时表单验证
            const formInputs = document.querySelectorAll('#add-employee-form input, #add-employee-form select');
            formInputs.forEach(input => {
                input.addEventListener('blur', function() {
                    validateField(this);
                });
            });

            function checkLoginStatus() {
                const token = localStorage.getItem('token');
                if (!token) {
                    window.location.href = '../../index.html';
                }
            }

            function validateForm() {
                let isValid = true;

                // 验证所有字段
                formInputs.forEach(input => {
                    if (!validateField(input)) {
                        isValid = false;
                    }
                });

                return isValid;
            }

            function validateField(input) {
                const id = input.id;
                const value = input.value.trim();
                let errorMessage = '';

                switch(id) {
                    case 'name':
                        if (!value) {
                            errorMessage = '请输入姓名';
                        }
                        break;
                    case 'age':
                        if (!value || !Validator.isNumber(value) || value < 18 || value > 65) {
                            errorMessage = '请输入有效的年龄（18-65岁）';
                        }
                        break;
                    case 'position':
                        if (!value) {
                            errorMessage = '请输入职位';
                        }
                        break;
                    case 'department':
                        if (!value) {
                            errorMessage = '请选择部门';
                        }
                        break;
                    case 'hireDate':
                        if (!value || !Validator.isDate(value)) {
                            errorMessage = '请选择有效的入职日期';
                        }
                        break;
                    case 'salary':
                        if (!value || !Validator.isMoney(value) || value <= 0) {
                            errorMessage = '请输入有效的薪资';
                        }
                        break;
                    case 'phone':
                        if (value && !Validator.isPhoneNumber(value)) {
                            errorMessage = '请输入有效的手机号码';
                        }
                        break;
                    case 'email':
                        if (value && !Validator.isEmail(value)) {
                            errorMessage = '请输入有效的电子邮箱';
                        }
                        break;
                }

                const errorElement = document.getElementById(`${id}-error`);
                if (errorMessage) {
                    errorElement.textContent = errorMessage;
                    errorElement.style.display = 'block';
                    input.classList.add('invalid');
                    return false;
                } else {
                    errorElement.style.display = 'none';
                    input.classList.remove('invalid');
                    return true;
                }
            }

            function showToast(message, type) {
                const toast = document.getElementById('toast');
                toast.textContent = message;
                toast.className = 'toast show ' + type;

                setTimeout(() => {
                    toast.className = 'toast';
                }, 3000);
            }

            function showLoading(show) {
                const loadingOverlay = document.getElementById('loading-overlay');
                loadingOverlay.style.display = show ? 'flex' : 'none';
            }
        });
    </script>
</body>
</html>